<template>
  <div class="main-detail">
      <el-tabs v-model="activeName" class="detail-tab">
        <el-tab-pane v-for="(pane,i) in componentConfig" :key="i" :label="pane.label" :name="pane.name">
          <keep-alive>
            <component 
                :inputData="detailData"
                :is="pane.component"
                :ref="pane.name"
            ></component>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
  </div>

</template>

<script>

export default {
  name: "Detail",
  mixins: [],
  data() {
    return {
      detailData:{},
      activeName:"dispatchDetails",
      componentConfig: [
        {
          name: "dispatchDetails",
          label: this.$t("model.tpinfo"),
          component: () => import("./page/dispatchDetails.vue")
        },
      ]
    };
  },
  methods: {
    validate(){
      return this.$refs[this.activeName][0].validate()
    }
  },
  mounted() {
    this.detailData = this.$route.query
  },
};
</script>

<style lang="scss" scoped>
.detail-tab{
  ::v-deep .el-tabs__header{
    margin-bottom: 10px;
  }
}
</style>
